<template>
	<view>
		<view class="top">
			<!-- <view class="name font">
				蜂盈健康
			</view>
			<view class="text">
				最新最潮最好赚的项目
			</view> -->
		</view>
		<view class="content">
			<image src="../../static/image/d5.png" class="img"></image>
			<view class="button">
				<view type="default" @click="isWeiXin()" class="b1 bot bg1">
					<image src="../../static/image/d2.png" mode=""></image>
					安卓下载
				</view>
				<view type="default" @click="isWeiXinIos()" class="b2 bot bg2">
					<image src="../../static/image/d3.png" mode=""></image>
					苹果下载
				</view>
			</view>
		</view>
		<view v-if="downloadMode" class="downloadMode" @click="downloadMode=!downloadMode">
			<image style="width: 301rpx;height: 241rpx;margin-left: 378rpx;z-index: 1;" src="../../static/image/mask1.png" mode=""></image>
			<image @click="downloadMode=true" style="margin-top: 300rpx; width: 301rpx;height: 71rpx;margin-left: 225rpx;z-index: 1;"
			 src="../../static/image/mask2.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	var than;
	// #ifdef H5
	var ua = navigator.userAgent.toLowerCase(),
		isWx = false,
		isQQ = false,
		isQQInstalled = false;
	// #endif
	export default {
		data() {
			return {
				maskss: false,
				android_url: "",
				downloadMode: false,
				ios_url: ""
			}
		},
		onLoad(option) {
			than = this;
			than.post("appstore/package/download", null, function(data) {
				than.android_url = data.android_url
				than.ios_url = data.ios_url
			})
			// #ifdef H5
			if (ua.indexOf('qq') > -1 && ua.indexOf('mqqbrowser') < 0) {
				//qq内置浏览器
				isQQInstalled = true;
			}
			if (ua.indexOf('mqqbrowser') > -1 && ua.indexOf("qq") < 0) {
				//qq浏览器
				isQQ = true;
			}
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//微信浏览器
				isWx = true;
			}
			if (isWx) {
				than.downloadMode = false
			} else if (isQQInstalled) {
				than.downloadMode = true
			}
			// #endif
		},
		methods: {
			isWeiXin() {
				if (isWx) {
					than.downloadMode = !than.downloadMode
				} else if (isQQ) {
					if (uni.getSystemInfoSync().platform == "android") {
						window.location.href = than.android_url
					} else {
						than.toast("仅android手机可用")
					}
				} else if (isQQInstalled) {
					than.downloadMode = !than.downloadMode
				} else {
					if (uni.getSystemInfoSync().platform == "android") {
						window.location.href = than.android_url
					} else {
						than.toast("仅android手机可用")
					}
				}
			},
			isWeiXinIos() {
				if (isWx) {
					than.downloadMode = !than.downloadMode

				} else if (isQQ) {
					if (uni.getSystemInfoSync().platform == "ios") {
						window.location.href = than.ios_url
					} else {
						than.toast("仅IOS用户可用")
					}
				} else if (isQQInstalled) {
					than.downloadMode = !than.downloadMode
				} else {
					if (uni.getSystemInfoSync().platform == "ios") {
						window.location.href = than.ios_url
					} else {
						than.toast("仅IOS用户可用")
					}
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		// background: linear-gradient(0deg, #FFB22B, #FFC40B);
		background-color: white;
	}

	.downloadMode {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: #333333;
		opacity: 0.6;
	}

	.content {
		text-align: center;

		.img {
			width: 100%;
			height: 1000rpx;
		}

		.button {
			margin-top: 100rpx;
			position: fixed;
			bottom:150rpx;
			left: 0;
			right: 0;
			display: flex;

             
			.bot {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				// color: #FFFFFF;
				border-radius: 40rpx;
				background: #111111;
				width: 300rpx;
				height: 104rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					margin-right: 14rpx;
					width: 26rpx;
					height: 30rpx;
				}
			}
			.bg1{			
                 background: #FFBF00;
			}
			.bg2{			    
                 background: #FFBF00;
			}
		}
	}

	.top {
		text-align: center;
		// margin-bottom: 62rpx;
		// padding-top: 50rpx;

		.img {
			margin-top: 81rpx;
			margin-bottom: 22rpx;
			border-radius: 20rpx;
			width: 146rpx;
			height: 146rpx;
		}

		.name {

			font-size: 75rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: bold;
			color: #06070D;
		}

		.text {
			margin-bottom: 39rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #06070D;
		}

		.button {
			margin: auto;
			width: 270rpx;
			height: 64rpx;
			border: 1rpx solid #808BA5;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #808BA5;
			justify-content: center;

			image {
				width: 12rpx;
				height: 19rpx;
			}
		}
	}
</style>
